<style>
.layui-input-block{
margin-left:120px;
}
</style>
<form class="layui-form" action="" id="orderEditForm" style="position: absolute;">
<div class="layui-row"  style="margin-top:10px;">
	  
	  <div class="layui-form-item">
	    <label class="layui-form-label" style="width:120px;">上级菜单</label>
	    <div class="layui-input-inline" style="width:200px;">
	    <input type="text" id="citySel" readonly class="layui-input" placeholder="无" th:value="${item.super_id}"/>
	    <input  name ="super_id" class="layui-input" id="super_id"  type="hidden" th:value="${item.super_id}">
	    <input  name ="id" class="layui-input" id="id"  type="hidden" th:value="${item.id}">
	    </div>
	     <div class="layui-input-inline" style="width:100px;">
            <i id="menuBtn"  class="layui-btn layui-icon layui-btn-small">&#xe615;选择</i>
        </div>
	  </div>
  	 
	  <div class="layui-form-item">
		    <label class="layui-form-label" style="width:120px;">菜单名称：</label>
		    <div class="layui-input-block" style="width:200px;">
		         <input type="text" name="name" class="layui-input" lay-verify="required" th:value="${item.name}"/>
		    </div>
	   </div>
 

  
  <div class="layui-form-item">
		    <label class="layui-form-label" style="width:120px;">url：</label>
		    <div class="layui-input-block" style="width:200px;">
		         <input type="text" name="url" class="layui-input" lay-verify="required" th:value="${item.url}"/>
		    </div>
	   </div>
	
	<div class="layui-form-item">
	    <label class="layui-form-label" style="width:120px;">是否可用：</label>
	    <div class="layui-input-block" style="width:200px;">
	      <select id="status" name="status" lay-verify="status" >
	      	<option th:each="s : ${statusList}" th:attr="value=${s.key}" th:text="${s.val}" th:selected="(${item.status}==${s.key})"></option>
	      </select>
	    </div>
	</div>
	
	<div class="layui-form-item">
	    <label class="layui-form-label" style="width:120px;">菜单类型：</label>
	    <div class="layui-input-block" style="width:200px;">
	      <select  id="type" name="type" lay-verify="type" >
	      	<option th:each="s : ${typeList}" th:attr="value=${s.key}" th:text="${s.val}" th:selected="(${item.type}==${s.key})"></option>
	      </select>
	    </div>
	</div>
	
	  <div class="layui-form-item">
		    <label class="layui-form-label" style="width:120px;">排序号：</label>
		    <div class="layui-input-block" style="width:200px;">
		         <input type="text" name="sort" class="layui-input" lay-verify="required" th:value="${item.sort}"/>
		    </div>
	   </div>
	
  	
	  <div class="layui-form-item">
	    <label class="layui-form-label" style="width:120px;" lay-filter="supplierContacts">备注</label>
	    <div class="layui-input-block" style="width:200px;">
		    <textarea name="remark"  class="layui-textarea" style="min-height:0px;" th:text="${item.remark}"></textarea>
	    </div>
	   </div>
</div>
  
 <div class="layui-row" style="margin-top:20px;">
    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12" style="text-align:center;">
          <button class="layui-btn" lay-submit="" lay-filter="formSubmit">提交</button>
      	<button type="button" class="layui-btn layui-btn-primary" id="closeBtn">关闭</button>
    </div>
  </div>
    <div id="menuContent" class="menuContent layui-bg-gray" style="display:none; position: absolute;">
    <ul id="treeDemo" class="ztree" style="margin-top:0; width:160px;"></ul>
    </div>
</form>

<script>

//start use
layui.use('form', function(){
	
	  var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
	  //……
	  //但是，如果你的HTML是动态生成的，自动渲染就会失效
	  //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
	  form.render();
	//监听表单提交
	form.on('submit(formSubmit)',function(data) {
		$.ajax({url:'/sys/menuManage/edit_execute',
			data:$("#orderEditForm").serializeJson(),
			type:"get",
			contentType:"application/json",
			success:function(data){
				if(data.code==200){
					layer.msg("数据保存成功！");
					reloadData();
					layer.closeAll();
				}else{
					layer.msg(data.message);
				}
			}});
		return false;
	});
	$('#closeBtn').click(function() {
		layer.close(editdialogindex);
	});
	 function reloadData(){
			$(".layui-laypage-btn")[0].click();//页面的确定按钮
			
		}
	//ztree 树
	 var setting = {
	            view: {
	                dblClickExpand: false
	            },
	            data: {
	                simpleData: {
	                    enable: true
	                }
	            },
	            callback: {
//	                 beforeClick: beforeClick,
	                onClick: onClick
	            }
	        };
	
	
	        function onClick(e, treeId, treeNode) {
	            var cityObj = $("#citySel");
	            var superId = $("#super_id");
	            cityObj.attr("value", treeNode.name);
	            superId.attr("value",treeNode.id);
	            hideMenu();//关闭下拉
	        }

// 	        function showMenu() {
			$("#menuBtn").click(function() {
				console.log("hello showMenu!");
	            var cityObj = $("#citySel");
	            var cityOffset = $("#citySel").offset();
	            $("#menuContent").css({left:"120px", top:"50px"}).slideDown("fast");
	            $("body").bind("mousedown", onBodyDown);
	            return false;
			});
	        
	        function hideMenu() {
	            $("#menuContent").fadeOut("fast");
	            $("body").unbind("mousedown", onBodyDown);
	        }
	        function onBodyDown(event) {
	            if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
	                hideMenu();
	            }
	        }

	        $(document).ready(function(){
	        	 $.ajax({
	                     type: "post",
	                     url: "/sys/menuManage/findAllMenu",
	                     type:"post",
	        			 contentType:"application/json",
	                     success: function(data){
	                     	if(data.code==200){
//	        	             		layer.msg(data.message)
	           					 $.fn.zTree.init($("#treeDemo"), setting, data.result);
	                     	}else{
	                     		layer.msg(data.message)
	                     	}
	                     }
	        		});
	        });
});
//end use
</script>
 